<template>
  <div>
    <div>
      <span
        class="test-text"
        v-for="(item, index) in list"
        :key="index"
        :style="{
          color: item.color,
          top: `${item.top}px`,
          left: `${item.left}px`,
          fontSize: `${item.fs}px`,
          fontWeight: item.fw,
          letterSpacing: `${item.ls}px`,
        }"
      >
        {{ item.text }}
      </span>
    </div>
    <v-img src="../../assets/system-config/index-bg.jpg"></v-img>

    <div style="display: flex;">
      <div class="test-color" :style="{ backgroundColor: item.color }" v-for="(item, index) in list2" :key="index">
          123
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    list: [
      {
        // text  文字内容  top 高  left 左
        // fw 加粗  fs 文字大小   color 文字颜色
        text: "智造",
        top: 150,
        left: 800,
        fw: 100,
        fs: 64,
        color: "#59B67F",
        ls: 0,
      },
      {
        text: "綠色生活",
        top: 190,
        left: 950,
        fw: 600,
        fs: 32,
        color: "red",
        ls: 0,
      },
      {
        text: "空氣檢測服務",
        top: 700,
        left: 800,
        fw: 800,
        fs: 64,
        color: "#4B5459",
        ls: 20,
      },
    ],
    list2: [{ color: "#CEE9Fc" }, { color: "#A1C3E5" }, { color: "#80CAB6" }],
  }),
};
</script>
<style scoped>
.test-text {
  position: absolute;
  z-index: 9999;
}
.test-color {
  width: 200px;
  margin: 0 30px;
  height: 200px;
  border-radius: 50% 0 50% 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>